  <template>
  <div class="page-container">

    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-row class="search-input">
            <el-form-item label="角色名：" prop="roleName">
              <el-input clearable v-model="filters.roleName" placeholder="角色名"></el-input>
            </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              label="查询"
              type="primary"
              @click="getSysRoleList(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              type="primary"
              @click="resetForm()" 
              label="重置"
            >
            </kt-button>
          </el-form-item>
          <el-form-item>
            <kt-button label="新增" type="primary"
             @click="handleAdd" perms="sys:role:add"/>
          </el-form-item>
          <el-form-item>
            <kt-button label="批量提交审核" type="primary" @click="batchSubmitReview"/>
          </el-form-item>
          <el-form-item>
            <kt-button label="批量审核" type="primary"  @click="reviewSysRole"/>
          </el-form-item>
        </el-row>
        
      </el-form>
    </div>
    <div class="tab-container">
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="item in tabMapOptions"
          :key="item.key"
          :label="item.label"
          :name="item.key"
        >
          <keep-alive>
            <tab-pane
              v-if="activeName==item.key"
              :type="item.key"
              ref="child"
              :parentFilters="filters"
            />
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import TableTreeColumn from "@/views/Core/TableTreeColumn";
import { format } from "@/utils/datetime";
import utils from "@/assets/js/utils.js";
import tabPane from "./TabPaneSysRole";
export default {
  components: {
    tabPane,
    KtButton,
    TableTreeColumn,
  },
  data() {
    return {
      tabMapOptions: [
        { label: "全部", key: "0" },
        { label: "待提交", key: "1" },
        { label: "待审核", key: "2" },
        { label: "审核通过", key: "3" },
        { label: "审核不通过", key: "4" },
      ],
      activeName: "0",
      size: "small",
      filters: {},
      columns: [
        { prop: "id", label: "ID", minWidth: 50 },
        { prop: "roleName", label: "角色名", minWidth: 120 },
        { prop: "deptName", label: "所属组织", minWidth: 120 },
        { prop: "createTime", label: "创建时间", minWidth: 120 }
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
    };
  },
  
  created() {
    const tab = this.$route.query.tab;
    if (tab) {
      this.activeName = tab;
    }
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`);
    }
  },
  methods: {
    // 获取当前选中部门的名称
    selectDept(val) {
      console.log('selectDepart', val)
      this.selectDepart = val;
      this.handleRoleSelectChange(val);
    },
    findDeptTree(){
      var that = this;
      this.utils.request.findDeptTree({},res=>{
        if(res.code=="0000"){
          that.options = res.data;
        }
      });
    },
    handleDelete: function(data) {
      if(data.params[0].id == 1){
        this.$message({message: '此角色无法删除', type: 'warning'});
        return false;
      }
      this.utils.request.deleteSysRole({id:data.params[0].id}, res=>{
        if(res.data){
          this.$message({message: '删除成功', type: 'success'});
          this.findPage();
        }else{
          this.$message({message: '该角色已关联到账号，请解除关联后在进行操作', type: 'warning'});
        }
      });
    },
    // 显示新增界面
    handleAdd: function() {
      this.$router.push({path:"/SysRoleAdd/0/0/0"});
    },
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      if (true) {
        return "llll";
      }
      return format(row[column.property]);
    },
    //重置
    resetForm() {
      this.$refs['filters'].resetFields();
      this.$refs.child[0].findPage();
    },
    getSysRoleList() {
      this.$refs.child[0].listQuery.pageNo = 1;
      this.$refs.child[0].findPage();
    },
    //批量提交审核
    batchSubmitReview(){
      let that = this; 
      let selectList = this.$refs.child[0].selection;
      if(selectList.length==0){
        this.$message({ message: "请选择要操作的数据",   type: "warning"});
        return false;
      }
      //判断状态是否为待提交
      for(var i =0; i < selectList.length; i++){
        if(selectList[i].status != 1 && selectList[i].status != 4){
          that.$message({ message: "当前数据勾选状态有误",   type: "warning"});
          return false;
        }
      }
      this.$confirm('您确定要批量提交审核？', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.utils.request.batchSubmitReview({"roleRequestList":selectList} , res => {
          if(res.code == "0000"){
            that.$message({ message: "操作成功",   type: "success"});
            that.getSysRoleList();
          }else if(res.code == "9999") {
            that.$message({ message:res.msg,   type: "error"});
          }
        });
      }).catch(() => {});

    },
    
    // 批量审核弹窗
    reviewSysRole(){
      //默认通过
      this.$nextTick(() => {
        let selection = this.$refs.child[0].selection;
        if(selection.length==0){
          this.$message({ message: "请选择要操作的数据",   type: "warning"});
          return false;
        }
        //判断状态是否为待提交
        for(var i =0; i < selection.length; i++){
          if(selection[i].status != 2){
            this.$message({ message: "当前数据勾选状态有误",   type: "warning"});
            return false;
          }
        }
        this.$refs.child[0].verifyForm.status = 3;
        this.$refs.child[0].verifyForm.remark = '';
        this.$refs.child[0].verifyForm.type = true;
        this.$refs.child[0].verifyForm.roleRequestList = selection
        this.$refs.child[0].dialogFormVisible = true;
      });
    },
  },
  mounted() {
    // this.findDeptTree();
  }
};
</script>
<style scoped lang="scss">
.menu-container {
  margin-top: 10px;
}
.menu-header {
  padding-left: 8px;
  padding-bottom: 5px;
  text-align: left;
  font-size: 16px;
  color: rgb(20, 89, 121);
}
.reset {
    background-color: #fff;
    color: #2F4554;
  }
</style>
